<template>
	<view>
		<view style="height: 50rpx;"></view>
		<view>
			<u-icon 
			@click="toBack()"
			name="arrow-left" style="font-size: 40rpx;color: gray;"></u-icon>
			<u-icon name="star" style="position: absolute;font-size: 45rpx;right: 260rpx;color: #DD524D;"></u-icon>
			<u-icon name="zhuanfa" style="position: absolute;font-size: 45rpx;right: 200rpx;"></u-icon>
		</view>
		<view style="height: 40rpx;"></view>
		<view 
			style="
				box-shadow: 0 20rpx 20rpx rgba(118,118,118,.2);">
			<scroll-view class=" mx-4 border align-center" style="width: 100%; white-space: nowrap" scroll-x="true" >
			<view :style="'width:'+(700*2)+'rpx'">
				<image
				src="../../../static/1.jpg"
				mode="aspectFill"  
				:style="
					'overflow-y:auto;'+
					'margin-left: 30rpx;'+
					'width: '+680+'rpx;'+
					'height: 370rpx;'+
					'border-radius: 20rpx;'
					">
			</image>
			
			<image
				src="../../../static/1.jpg"
				mode="aspectFill"  
				:style="
					'overflow-y:auto;'+
					'margin-left: 30rpx;'+
					'width: '+680+'rpx;'+
					'height: 370rpx;'+
					'border-radius: 20rpx;'
					">
			</image>
	</view>
			</scroll-view>
			<view>
				<view  style="transform: translateX(-50%);margin-left: 50%;width: 90%;padding: 30rpx;position: relative;border-bottom: 3rpx solid rgba(118,118,118,.3);">
					
				<view style="font-weight: bold;">天籁KTV</view>
				<view style="height: 10rpx;"></view>
				<view style="font-size: 26rpx;">
					<u-rate style="margin-right: 20rpx;" v-model="value" :colors="colors" :icons="icons" inactive-icon="thumb-up"></u-rate>
					￥100/人</view>
				<view style="height: 10rpx;"></view>
				<view style="font-size: 24rpx;">总体：4.5 环境：4.5 服务：4.1</view>
				<view 
					style="
						position: absolute;
						bottom: 30rpx;
						right: 20rpx;
						display: inline-block;
						font-size: 25rpx;">休闲玩乐<u-icon name="arrow-right"></u-icon></view>
				<view style="
					position: absolute;
					right: 20rpx;
					font-size: 24rpx;
					color: gray;
					bottom: 80rpx;">
					<u-icon style="color: #2D5EDF;" name="map-fill"></u-icon>
					京东大道</view>
				</view>
				<view style="position: relative;padding: 30rpx 30rpx 30rpx 30rpx;">
					<view style="font-size: 28rpx;">
						高新七路恒大商业广场 4 楼
					</view>
					<view style="font-size: 25rpx;color: gray;">驾车2.0km，需约5分钟</view>
					<view style="right: 30rpx;position: absolute;display: inline-block;text-align: center;bottom: 30rpx;">
						<u-icon name="phone-fill" style="color: #F45E33;"></u-icon>
						<view style="font-size: 25rpx;color: gray;">电话</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 30rpx;"></view>
		<view style="padding: 20rpx;background-color: #FFFFFF;box-shadow: 0 0 20rpx gray;">
			<view style="padding-left: 40rpx;padding-bottom: 10rpx;font-weight: bold;font-size: 25rpx;">
				<text style="
					color: #FFFFFF;
					padding: 5rpx;
					margin-right: 10rpx;
					font-size: 20rpx;
					background-color:#80C157">订</text>
				预订</view>
			<u-grid :col="5" style="font-size: 24rpx;margin: 0;">
				<u-grid-item class="grid-selected">
					<view class="grid-text">今天</view>
					<view class="grid-text">06-19</view>
				</u-grid-item>
				<u-grid-item>
					<view class="grid-text">今天</view>
					<view class="grid-text">06-19</view>
				</u-grid-item>
				<u-grid-item>
					<view class="grid-text">今天</view>
					<view class="grid-text">06-19</view>
				</u-grid-item>
				<u-grid-item>
					<view class="grid-text">今天</view>
					<view class="grid-text">06-19</view>
				</u-grid-item>
				<u-grid-item>
					<view class="grid-text">今天</view>
					<view class="grid-text">06-19</view>
				</u-grid-item>
				</u-grid>
				<view>
					<u-tag  shape="circle" text="小包(1-6人)" type="error"></u-tag>
					<view style="display: inline-block;width: 10px;"></view>
					<u-tag shape="circle" text="小包(1-6人)" type="info"></u-tag>
					<view style="display: inline-block;width: 10px;"></view>
					<u-tag shape="circle" text="小包(1-6人)" type="info"></u-tag>					
				</view>
				<view style="padding: 20rpx;position: relative;">
					<view style="font-size: 25rpx;font-weight: bold;">18：00 至次日 02：00 内，任选 8 小时</view>
					<view style="height: 10rpx;"></view>
					<view style="font-size: 30rpx;"><text style="color:#FF7348;">￥106</text><text style="margin-left: 20rpx;color: gray;font-size: 20rpx;">可选套餐</text></view>
					<u-button size="mini" type="warning" style="position: absolute;bottom:30rpx;right: 20rpx;">预订</u-button>
				</view>
		</view>
		<view style="height: 20rpx;"></view>
		<view style="padding: 20rpx;box-shadow: 0 0 10rpx rgba(118,118,118,.5);background-color: #FFFFFF;">
			<view style="font-weight: bold;">评论（{{pinglunNumber}}）</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pinglunNumber:0,
				imageWidth:0,
				value: 2,
				colors: ['rgba(255,0,0,.5)', 'rgba(255,0,0,.7)', 'rgba(255,0,0,.9)'],
				icons: ['thumb-down-fill', 'thumb-down-fill', 'thumb-up-fill', 'thumb-up-fill'],
				
			}
		},
		mounted() {
			var iwhB=false;
			this.imageWidth=680;
			var iwhInter=setInterval(()=>{
				if(this.imageWidth<1080&&(!iwhB)){
					this.imageWidth+=2;
				}
				
				if(this.imageWidth>=1080){
					iwhB=true
				}
				if(iwhB){
					this.imageWidth-=2;
					if(this.imageWidth<=680){
						clearInterval(iwhInter);
					}
				}
			},1);
			
			var ii=parseInt(6000/500);
			var pinglunNumberInter=setInterval(()=>{
				if(this.pinglunNumber<=6000){
					this.pinglunNumber+=ii;
				}else{
					this.pinglunNumber=6000;
					clearInterval(pinglunNumberInter);
				}
			},1);
		},
		methods: {
			toBack(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss">
.grid-selected {
	color:#FF6634;
	font-weight: bold;
	.grid-text{
		color:#FF6634;
	}
}

.grid-text{
	color:rgba(0,0,0,.6);
}

</style>
